

<template>
    <view class="groupMembers">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->

        <view
            style="
                background: #fff;
                width: 750rpx;
                position: fixed;
                z-index: 100;
            "
            :style="{ height: systemInfo.statusBarHeight+'px'}"
        >
        </view>


        <view
                class="slim_header d-flex a-center j-center"
                style="border-bottom: none"
                :style="{ top: systemInfo.statusBarHeight + 'px' }"
            >
                <view class="left_box" @tap="goBack">
                    <image src="/static/center/back.png" class="back"></image>
                </view>
                <view class="title d-flex a-center j-between">我的动态</view>
                <view class="right_box">
                    <text
                        class="right_box_text"
                        style="color: #1dc691; font-size: 28rpx"
                        @tap="goRelease"
                        >发动态</text
                    >
                    <!-- <image src="/static/center/dian.png" class="dian"></image> -->
                </view>
            </view>


        <view
            class="content"
            :style="{ top: `calc(  100rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <pullScroolView
                v-if="trends.length"
                class="scrollView"
                ref="scroll"
                :pullDown="refresh"
                :pullUp="scrolltolower"
            >
                <view
                    class="card"
                    v-for="(item, index) in trends"
                    :key="item.id"
                    @tap="goTrendDetail(item.id)"
                >
                    <view class="user_msg psr d-flex a-center">
                        <userhead
                            width="100"
                            height="100"
                            :saveKey="item.userId"
                            :isVip="item.isVip"
                            :src="item.photo"
                        />
                        <view class="d-flex d-c msg">
                            <view class="u_name">{{ item.nickName }}</view>
                            <sexage
                                class="sexage"
                                :sex="item.sex"
                                :age="item.age"
                            />
                        </view>

                        <view class="status_box d-flex a-center">
                            <i class="icon" :class="[getStatusIcon(item.status)]"></i>
                            <view v-if="item.isTop" class="isTop">置顶</view>
                        </view>
                    </view>

                    <view class="trend">
                        <view class="title">
                            <text class="text">{{ item.content }}</text>
                        </view>

                        <view v-if="item.imgs.length" class="imgs d-flex d-r">
							<image
							    v-for="(img, imgIndex) in item.imgs"
							    :key="img"
							    @tap.stop="previewImage(item.imgs,imgIndex)"
							    class="img"
							    :class=[getImgClass(item.imgs)]
							    :src="img"
							    mode="aspectFill"
							/>
                            <!--
							<image
                                v-for="(img, imgIndex) in item.imgs"
                                :key="img"
                                :id="`img${item.id}${imgIndex}`"
                                @tap.stop="
                                    previewImage(
                                        `img${item.id}`,
                                        imgIndex,
                                        imageConvertArray(item.picture)
                                    )
                                "
                                class="img"
                                :class=[getImgClass(item.imgs)]
                                :src="img"
                                mode="aspectFill"
                            />
							-->
                        </view>

                        <view class="desp d-flex d-r">

                            <text class="online" v-if="item.isOnline">当前在线</text>

                            <text class="text d-flex d-r a-center">
                                <text :class="{online:calcTimeForShow(item)==='刚刚在线'}" v-if="!item.isOnline">
                                    {{ calcTimeForShow(item)}}
                                </text>
                                <text v-if="item.location">·{{ item.location }}</text>
                            </text>
                        </view>

                        <view class="controls d-flex a-center j-between">
                            <view class="d-flex a-center">
                                <image
                                    v-if="!item.isLike"
                                    @tap.stop="ToggleLikeTrend(item)"
                                    class="icon"
                                    src="/static/image/aixin1.png"
                                    mode=""
                                />
                                <image
                                    v-if="item.isLike"
                                    @tap.stop="ToggleLikeTrend(item)"
                                    class="icon"
                                    src="/static/image/diet-collect-yes.png"
                                    mode=""
                                />
                                <text class="text">{{
                                    item.likeCount ? item.likeCount : "赞"
                                }}</text>
                                <image
                                    class="icon"
                                    style="margin-left: 20rpx"
                                    src="/static/image/lianxi1.png"
                                    mode=""
                                />
                                <text class="text">{{
                                    item.appraiseCount
                                        ? item.appraiseCount
                                        : "评论"
                                }}</text>
                            </view>

                            <view v-if="userData.id === item.userId" class="more d-flex a-center" @tap.stop="showControl(item)">
                                <view class="dian"></view>
                                <view class="dian"></view>
                            </view>



                        </view>
                    </view>
                </view>

                <view class="heightBox"></view>
            </pullScroolView>

            <view
                v-if="!trends.length"
                class="nodata d-flex d-c a-center j-center"
            >
                <image class="img" src="/static/nodata1.png"></image>

                <view class="desp d-flex d-c a-center j-center">
                    <view class="d-flex j-center"
                        ><text class="text">你还没有任何动态</text></view
                    >
                    <view class="d-flex j-center"
                        ><text class="text"
                            >发布动态，分享你的瘦身历程</text
                        ></view
                    >
                </view>

                <view style="margin-top: 50rpx">
                    <tm-button
                        class="btn"
                        :width="320"
                        :shadow="0"
                        color="#1DC691"
                        :linear-color="['#64F1C5', '#29DBA3']"
                        linear="left"
                        :fontSize="32"
                        fontColor="#ffffff"
                        label="发布动态"
                        @tap="goRelease"
                    ></tm-button>
                </view>
            </view>
        </view>
    </view>


    <uni-popup ref="popup" type="bottom" :safe-area="false" background-color="transparent">
        <view class="popup_box">
            <view class="controls d-flex">
                <view class="control d-flex d-c a-center" @tap="toggleIsTop">
                    <i class="icon icon-zhiding1"></i>
                    <view class="text">
                        {{currentTrend.isTop?'取消置顶':'置顶'}}
                    </view>
                </view>
                <view class="control d-flex d-c a-center" @tap="goTrendConfig">
                    <i class="icon icon-zhanshifanwei"></i>
                    <view class="text">
                        修改展示范围
                    </view>
                </view>
                <view class="control d-flex d-c a-center" @tap="showDel">
                    <i class="icon icon-shanchu1"></i>
                    <view class="text">
                        删除
                    </view>
                </view>
            </view>
            <view style="height:20rpx;width:750rpx;background:#f5f5f5;"></view>
            <view class="bottom_button d-flex a-center j-center" @tap="popup.close()">
                <text class="text">取消</text>
            </view>
            <view class="heightBox"></view>
        </view>

        
    </uni-popup>

    <uni-popup
            ref="delPopup"
            type="bottom"
            :safe-area="false"
            background-color="transparent"
        >
            <view class="sys-confirm-content">
				<view class="confirm-content-title">确认删除该动态?</view>
				<!-- <view class="confirm-content-tip">
					<view class="content-tip-row" style="color: #cc3300;">同时删除与该联系人的聊天记录</view>
				</view> -->
				<view  @tap="DelTrend" class="content-button button-confirm" style="color: #1DC691;">确认</view>
				<view style="height: 20rpx; background: #f5f5f5"></view>
				<view @tap="delPopup.close" class="content-button" style="color: #999999;">取消</view>
		    </view>

            <!-- <view class="popup-content">
                <view class="desp d-flex a-center"
                    >确认删除该动态?</view
                >
                <view
                    class="row d-flex a-center j-center error"
                    @tap="DelTrend"
                    >删除</view
                >
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    class="row d-flex a-center j-center cancel"
                    @tap="delPopup.close"
                    >取消</view
                >
            </view> -->
        </uni-popup>



    <imagePreview ref="preview"></imagePreview>
</template>

<script setup lang="ts">
import { ref, reactive,computed } from "vue";
import { onReady, onShow, onLoad, onUnload,onPageScroll } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { likeTrend, unlikeTrend, updateTrend } from "@/api/api";
import cacheimg from "@/components/cacheimg.vue";
import { imStore as imStore1 } from "@/store/imStore";
import userhead from "@/components/userhead.vue";
import sexage from "@/components/sexage.vue";
import { wait, showLoading, closeLoading } from "@/utils/utils";
import { getUserTrends,delTrend } from "@/api/api";
import imagePreview from "@/components/imagePreview.vue";
import { imageConvertArray, getHDImages } from "@/utils/format";

onPageScroll((res) => {
    const scrollTop = res.scrollTop;
    if(res.scrollTop===0){
        backTop();
        setTimeout(()=>{
            uni.pageScrollTo({scrollTop:100});
        },100)
    }
});


const imStore: any = imStore1();
const scroll = ref(null);
const popup = ref(null);
const currentTrend = ref({});

const backTop = ()=>{
    scroll.value.onBackTop();
}


const showControl = (trend:any)=>{
    console.log(trend)
    currentTrend.value = trend;
    popup.value.open();
}

const calcTimeForShow=computed(()=>(item:any)=>{
    const {eventTime,isOnline,createTime} = item;
    const currentTime = new Date().getTime();
    let showUserTime = false;
    let subTime = currentTime - eventTime;
    if(subTime < 172800000){
        showUserTime = true;
    }

    if(showUserTime){
        if( subTime < 1200000 ){
            return '刚刚在线'
        }
        if( subTime < 3600000 ){
            return '最近在线'
        }

        if( 3600000 <= subTime < 86400000 ){
            return '今天在线'
        }

        if( 86400000 <= subTime < 172800000 ){
            return '昨天在线'
        }
    }else{
        return fromNow(createTime)
    }
})



const fromNow = (time) => {
    if (!time) {
        return "--";
    }
    return uni.$tm.u.getDateToNewData(time);
};

const ToggleLikeTrend = async (item: any) => {
    const { id, isLike } = item;

    const params = { fcmid: id, userId: userData.id };
    let res = null;
    if (isLike) {
        res = await unlikeTrend(params);
    } else {
        res = await likeTrend(params);
    }
    const { flag } = res;
    if (flag === 1) {
        if (isLike) {
            item.likeCount -= 1;
        } else {
            item.likeCount += 1;
        }
        item.isLike = !!!isLike;
    }
};

const goUserDetail = (userId: any) => {
    uni.navigateTo({
        url: `/pages/personalCenter/personalCenter?userId=${userId}`,
    });
};

const userData: any = userDataStore();
const systemInfo: any = systemInfoStore();
const trends = ref([]);

const pageParam = reactive({
    page: 1,
    rows: 10,
    total: 0,
});

const goBack = () => {
    uni.navigateBack();
};

const goTrendDetail = (id) => {
    if (!id) {
        return;
    }
    uni.navigateTo({
        url: `/pages/trends/trendDetail?fcmid=${id}`,
    });
};

const GetUserTrends = async () => {
    if (pageParam.total && trends.value.length >= pageParam.total) {
        return;
    }

    const { page, rows } = pageParam;
    const params = {
        userId: userData.id,
        page,
        rows,
    };

    const res = await getUserTrends(params);
    const { flag, data } = res;

    pageParam.total = data.total;

    data.list.forEach((item) => {
        item.imgs = item.picture.split(",").filter((img) => img);
    });

    pageParam.page += 1;


    if (page === 1) {
        trends.value = data.list;
    } else {
        trends.value.push(...data.list);
    }
};

const getStatusIcon=computed(()=>(num:any)=>{
    if(num===1){
        return 'icon-gongkai'
    }
    if(num===2){
        return 'icon-jinhaoyou'
    }
    if(num===3){
        return 'icon-quanzi'
    }
    if(num===4){
        return 'icon-jinzijikejian'
    }
})

const getImgClass=computed(()=>(arr:array)=>{
    if(arr.length === 1){
        return 'L1'
    }
    if(arr.length === 2||arr.length ===4){
        return 'L2'
    }

    return 'L3'

})



const refresh = async () => {
    pageParam.page = 1;
    pageParam.total = 0;
    await GetUserTrends(true).catch(() => {});

    setTimeout(() => {
        scroll.value.success();
    }, 500);
};

const scrolltolower = async () => {
    await GetUserTrends().catch(() => {});
};

const goRelease = () => {
    uni.navigateTo({
        url: `/pages/trends/releaseTrends`,
    });
};
const previewImage = (imgs:any,index:number) => {
	if(imgs){
		if(systemInfo.platform==='android'){
			imStore.setReset(false)
		}
		uni.previewImage({
		  current: index,
		  urls: imgs,
		  indicator: 'number'
		});
	}
}
/*
const preview = ref();
const previewImage = (idPre: string, index: number, urls: any) => {
    uni.createSelectorQuery()
        .select(`#${idPre}${index}`)
        .boundingClientRect()
        .exec((ret) => {
            let params = {
                idPre,
                startInfo: [ret[0]], //图片的初始大小与位置
                index: index, //当前id
                urls: getHDImages(urls), //预览集合图片地址
            };
            preview.value.open(params);
        });
};
*/
const toggleIsTop=async ()=>{
    popup.value.close();
    const res = await updateTrend({id:currentTrend.value.id,isTop:currentTrend.value.isTop?0:1});
    const {flag} = res;
    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: "操作失败,请重试",
            duration: 1500,
        });
        return;
    }

    uni.showToast({
        icon: "sucess",
        title: currentTrend.value.isTop?'已取消置顶':'已置顶',
        duration: 1500,
    });

    refresh();
}


const delPopup = ref(null)

const showDel = ()=>{
    popup.value.close();
    setTimeout(()=>{
        delPopup.value.open();
    },300)

}


const DelTrend=async ()=>{
    delPopup.value.close();
    const res = await delTrend({id:currentTrend.value.id});
    const {flag} = res;
    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: "操作失败,请重试",
            duration: 1500,
        });
        return;
    }
    const index = trends.value.findIndex(item=>item.id===currentTrend.value.id)
    trends.value.splice(index,1)
    pageParam.total-=1;

    uni.showToast({
        icon: "sucess",
        title: '已删除',
        duration: 1500,
    });
}

const goTrendConfig = () => {
    const { id,status } =  currentTrend.value;
    popup.value.close();
    uni.navigateTo({
        url: `/pages/trends/trendConfig?type=edit&status=${status}&id=${id}`,
    });
};

const statusEditChange = (obj:any) => {
    const {id,status} = obj;
    trends.value.forEach(trend=>{
        if(trend.id===id){
            trend.status = status;
        }
    })
}




onReady(() => {});

onLoad((option: any) => {
    setTimeout(() =>{
        uni.pageScrollTo({scrollTop:100});
    },100)
    uni.$on('statusEditChange',statusEditChange);
});
onUnload((option: any) => {
    uni.$off('statusEditChange',statusEditChange);
});

onShow(() => {
    refresh();
});
</script>

<style lang="scss" scoped>
.right_box_text {
    &:active {
        opacity: 0.7;
    }
}
.a-center {
    align-items: center;
}

.j-center {
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}

.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
}
.d-r {
    flex-direction: row;
}

.j-end {
    justify-content: flex-end;
}
.groupMembers {
    width: 750rpx;
    height: calc(100vh + 1px);
    background: #f5f5f5;

    .content {
        position: fixed;
        width: 750rpx;
        left: 0;
        right: 0;
        // bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
        // bottom: calc(env(safe-area-inset-bottom) + 120rpx);
        bottom: 0;
        background: #f5f5f5;
        .card {
            width: 710rpx;
            margin: 20rpx auto;
            padding: 20rpx 35rpx;
            background: #fff;
            border-radius: 20rpx;
            .msg {
                margin-left: 20rpx;
            }
            .u_name {
                font-size: 30rpx;
                font-weight: 600;
                color: #666;
                margin-bottom: 10rpx;
            }

            .status_box{
                position:absolute;
                top:0;
                right:0;
                color:#ccc;
                .icon{
                    font-size:30rpx;
                }
            }

            .sexage {
                align-self: flex-start;
            }

            .trend {
                margin-top: 13rpx;
                .title {
                    .text {
                        font-size: 30rpx;
                        color: #333;
                        line-height: 42rpx;
                    }
                }
                .imgs {
                    width: 680rpx;
                    margin-top: 15rpx;
                    flex-wrap: wrap;
                    gap: 20rpx;
                    .img {
                        border-radius: 20rpx;
                    }
                    .L1{
                            width:350rpx;
                            height:350rpx;
                        }
                    .L2{
                            width:250rpx;
                            height:250rpx;
                        }
                    .L3{
                            width: 200rpx;
                            height: 200rpx;
                        }
                }

                .desp {
                    margin-top: 10rpx;
                    .online{
                        font-size:24rpx;
                        color:#1DC691;
                    }
                    .text {
                        font-size: 24rpx;
                        color: #999;
                    }
                }

                .controls {
                    margin-top: 15rpx;
                    .icon {
                        width: 40rpx;
                        height: 40rpx;
                    }
                    .text {
                        font-size: 28rpx;
                        color: #999;
                        margin-left: 10rpx;
                    }

                    .more{
                        width: 60rpx;
                        height: 40rpx;
                        background: rgba(0,0,0,0.06);
                        border-radius: 6rpx;
                        justify-content: center;
                        gap:10rpx;
                        .dian{
                            width: 8rpx;
                            height: 8rpx;
                            background: #999;
                            border-radius: 4rpx;
                        }
                    }
                }
            }
        }
        .heightBox {
            min-height:20rpx;
            height: constant(safe-area-inset-bottom);
            height: env(safe-area-inset-bottom);
        }
        .nodata {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;

            .img {
                width: 560rpx;
                height: 560rpx;
            }
            .desp {
                margin-top: 20rpx;
                width: 560rpx;
                .text {
                    font-size: 28rpx;
                    color: #999;
                }
            }
        }
    }
}

.popup_box{
    width:750rpx;
    border-top-left-radius:20rpx;
    border-top-right-radius:20rpx;
    background:#fff;
    overflow:hidden;
    .icon{
        font-size:60rpx;
        color:#666;
    }
    .controls {
        margin-top: 55rpx;
        margin-bottom:50rpx;
        .control {
            width:180rpx;
        }
        .text {
            font-size: 28rpx;
            color: #333;
            margin-top: 40rpx;
            text-align: center;
            &.text1{
                margin-top:0;
            }
        }

        
    }
    .bottom_button {
        width:750rpx;
        height:100rpx;
        background:#fff;
        .text {
            color: #333;
            font-size:32rpx;
        }
    }

    .heightBox {
            min-height:20rpx;
            height: constant(safe-area-inset-bottom);
            height: env(safe-area-inset-bottom);
        }
}
</style>
